<template>
  <div class="hot-picture flex pad-t-10">
      <img v-for="(item, index) in fixedComponentsHotDataList" :key="index" :src="item.imgUrl" alt="" class="mar-r-9 cursor-p" @click="handleJumpPage(item)">
  </div>
</template>

<script lang="ts">
  import {
    useRouter
  } from 'vue-router'
  import {
    defineComponent,
    ref,
    onMounted,
    inject
  } from 'vue'
  import {
    jumpPage
  } from '@/utils/jumpPageUtils'
  export default defineComponent({
    name: 'HotPicture',
    setup() {
      const router = useRouter()
      let fixedComponentsHotDataList = inject('fixedComponentsHotDataList')
      onMounted(() => {
      })
      const handleJumpPage = (item) => {
        jumpPage(router, item.hasLink, item.linkTarget, item.linkType, item.linkParams, item.newPage)
      }
      return {
        fixedComponentsHotDataList,
        handleJumpPage
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;

  .hot-picture {
    img {
      width: 214px;
      height: 198px;

      &:last-child {
        margin-right: 0 !important;
      }
    }
  }
</style>
